<template>
  <el-row :gutter="0" class="vab-query-form">
    <slot></slot>
  </el-row>
</template>

<style scoped lang="scss">
@use 'sass:math';

@mixin panel {
  display: flex;
  flex-wrap: wrap;
  place-content: center flex-start;
  align-items: center;
  min-height: 32px;

  .el-form-item__content {
    display: flex;
    align-items: center;
  }

  > .el-button {
    margin: 0 10px #{math.div(12px, 2)} 0 !important;
  }
}

.vab-query-form {
  opacity: 0;
  transform: translateX(-20px);
  animation: vab-query-in 1.5s forwards;

  :deep() {
    .el-form-item:first-child {
      margin: 0 0 #{math.div(12px, 2)} 0 !important;
    }

    .el-form-item + .el-form-item {
      margin: 0 0 #{math.div(12px, 2)} 0 !important;

      .el-button {
        margin: 0 0 0 10px !important;
      }
    }

    .top-panel {
      @include panel;
    }

    .bottom-panel {
      border-top: 1px solid #dcdfe6;

      @include panel;
    }

    .left-panel {
      @include panel;
    }

    .right-panel {
      display: flex;
      flex-wrap: wrap;
      place-content: center flex-start;
      align-items: center;
      justify-content: flex-end;
      min-height: 32px;

      .el-form-item__content {
        display: flex;
        align-items: center;
      }

      > .el-button {
        margin: 0 10px #{math.div(12px, 2)} 0 !important;
      }
    }
  }
}

@keyframes vab-query-in {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
</style>
